<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="城市风险排行"
    />
    <div class="search">
      <el-date-picker
        class="search-li"
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        prop="idx"
        label="排行">
      </el-table-column>
      <el-table-column
        prop="areaName"
        label="地市">
      </el-table-column>
      <el-table-column
        prop="sourceNum"
        label="危险源数">
      </el-table-column>
      <el-table-column
        prop="total"
        label="风险隐患数">
      </el-table-column>
      <el-table-column
        prop="zhongdaTotal"
        label="重大">
      </el-table-column>
      <el-table-column
        prop="jiaodaTotal"
        label="较大">
      </el-table-column>
      <el-table-column
        prop="yibanTotal"
        label="一般">
      </el-table-column>
      <el-table-column
        prop="diTotal"
        label="低">
      </el-table-column>

    </el-table>
    <!-- <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      :is-index="true"
      title=""
      maxHeight="30vh"
      ref="table"
    >
    </v-table> -->
  </div>
</template>

<script>
import VTable from "@/components/VTable/index";
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import { time_select_optios } from '@/utils/global.js';
import { riskHazardCityStatistics
} from '@/api/risk/riskHazard'
export default {
  name: "alarmAmount",
  components: {
    VTable,
    formTitleVue,
  },
  data() {
    return {
      tableData: [],
      loading: false,
      searchForm: {
        time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
        startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD"),
        endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD"),
        areaCode:'',
        placeType:''
      },
    };
  },
  methods: {
    changeMonth(item){
      this.searchForm.startTime = this.$dayjs(item).startOf("month").format("YYYY-MM-DD")
      this.searchForm.endTime = this.$dayjs(item).endOf("month").format("YYYY-MM-DD")
      this.getData()
    },
    getData() {
      this.loading = true;
      this.searchForm.areaCode = this.$store.state.account.user.deptIds;
      this.searchForm.placeType = this.$commonJs.getPlaceType(this.searchForm.areaCode);
      riskHazardCityStatistics(this.searchForm).then((res) => {

        this.tableData=res.data
        res.data.forEach((item,index) => {

          item.idx=index+1;
        })

        this.loading = false

      });

    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.alarmAmount-root {
  position: relative;
  .search{
    position: absolute;
    top: 0px;
    right: 0px;
    .search-li{
      width: 120px;
    }
  }
}
</style>
